<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🛒</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <header><img src="./imgs/shooping-cart.png" alt=""></header>
  <main>
    <ul id="product-list">
      <!-- <li>
        <div class="img-box"> <img src="./imgs/apple.png" alt=""></div>
        <h4>苹果</h4>
        <h5>Apple</h5>
        <h6>¥2.99</h6>
        <button class="btn">加入购物车</button>
      </li> -->
    </ul>
    <aside id="cart-list">
      <h2><img src="./imgs/cart.png" alt=""></h2>
      <table>
        <thead>
          <tr>
            <th class="item">
              <h5>商品</h5>
              <h6>Item</h6>
            </th>
            <th class="price">
              <h5>价格</h5>
              <h6>Price</h6>
            </th>
            <th class="quantity">
              <h5>数量</h5>
              <h6>Quantity</h6>
            </th>
            <th class="delete">
            </th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr>
            <td class="item">
              <img src="./imgs/beer.png" alt="">
              <p>啤酒</p>
            </td>
            <td class="price">
              <p>¥6.66</p>
            </td>
            <td class="quantity">
              <input type="number" name="" id="">
            </td>
            <td class="delete">
              <button>X</button>
            </td>
          </tr> -->
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4" class="total">Total <span>¥0</span></td>
          </tr>
          <tr>
            <td colspan="4"><button class="buy btn">购买</button></td>
          </tr>
        </tfoot>
      </table>
    </aside>
  </main>
  <footer><img src="./imgs/thanks.png" alt=""></footer>
  <script src="./cookie.js"></script>
  <script src="./index.js"></script>
</body>

</html>